<template>
  <h1>{{ newData  }}</h1>
 <button @click="setNewData">按钮</button>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
  import { toRef , reactive ,ref} from 'vue'
  // let o = {name:"张飒",age:18}
  // let o  = reactive({name:"张飒",age:18})
  let o  = ref({name:"张飒",age:18})
  let newData = toRef(o,'name')
  // toRef的返回值 就是原始数据的引用地址;
  console.log(newData === o);
  const setNewData = ()=>{
    console.log(newData.value);
    newData.value = '李四'
    console.log(newData);
  }
</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<script>
  export default {
    name:"App"
  }
</script>